<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首页 - 人力资源管理系统</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
      background: #f5f7fa;
    }
    .layout {
      display: flex;
      height: 100vh;
    }
    .sidebar {
      width: 220px;
      background: #232a3b;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding-top: 16px;
    }
    .sidebar h2 {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 32px 24px;
      letter-spacing: 2px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0 0 0 24px;
      margin: 0;
    }
    .sidebar li {
      margin-bottom: 18px;
      font-size: 16px;
      opacity: 0.85;
      cursor: pointer;
    }
    .sidebar li.active {
      color: #40a9ff;
      font-weight: bold;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .topbar {
      height: 56px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 32px;
      border-bottom: 1px solid #e5e6eb;
      justify-content: space-between;
    }
    .topbar .title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
    }
    .topbar .user {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .content {
      flex: 1;
      padding: 24px 32px;
      overflow-y: auto;
    }
    .stats-overview {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }
    .stat-card {
      background: #fff;
      border-radius: 6px;
      padding: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .stat-card .number {
      font-size: 32px;
      font-weight: bold;
      color: #232a3b;
      margin-bottom: 8px;
    }
    .stat-card .label {
      font-size: 14px;
      color: #666;
    }
    .stat-card.warning .number {
      color: #faad14;
    }
    .stat-card.danger .number {
      color: #ff4d4f;
    }
    .chart-section {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 24px;
      margin-bottom: 24px;
    }
    .chart-card {
      background: #fff;
      border-radius: 6px;
      padding: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .chart-title {
      font-size: 16px;
      font-weight: bold;
      color: #232a3b;
      margin-bottom: 16px;
    }
    .donut-chart {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(
        #40a9ff 0% 75%,
        #ff4d4f 75% 100%
      );
      margin: 20px auto;
      position: relative;
    }
    .donut-chart::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120px;
      height: 120px;
      background: #fff;
      border-radius: 50%;
    }
    .chart-legend {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 16px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }
    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
    }
    .quick-actions {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }
    .action-button {
      padding: 12px 24px;
      border: none;
      border-radius: 4px;
      background: #40a9ff;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .action-button.secondary {
      background: #f5f7fa;
      color: #232a3b;
    }
    .filter-section {
      background: #fff;
      border-radius: 6px;
      padding: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .filter-row {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }
    .filter-item {
      flex: 1;
    }
    .filter-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    .filter-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
    }
    .department-tree {
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      padding: 16px;
      height: 200px;
      overflow-y: auto;
    }
    .tree-item {
      padding: 8px;
      cursor: pointer;
    }
    .tree-item:hover {
      background: #f5f7fa;
    }
    .tree-item.active {
      color: #40a9ff;
    }
  </style>
</head>
<body>
  <div class="layout">
    <div class="sidebar">
      <h2>业信人力资源管理系统</h2>
      <ul>
        <li>客户管理</li>
        <li class="active">人员花名册</li>
        <li>合同管理</li>
        <li>薪酬管理</li>
        <li>系统设置</li>
      </ul>
    </div>
    <div class="main">
      <div class="topbar">
        <span class="title">首页</span>
        <div class="user">
          <span>管理员</span>
          <img src="https://via.placeholder.com/32x32.png?text=U" style="border-radius:50%;" alt="用户头像">
        </div>
      </div>
      <div class="content">
        <!-- 统计概览 -->
        <div class="stats-overview">
          <div class="stat-card">
            <div class="number">1,234</div>
            <div class="label">在职员工</div>
          </div>
          <div class="stat-card warning">
            <div class="number">45</div>
            <div class="label">试用期员工</div>
          </div>
          <div class="stat-card danger">
            <div class="number">12</div>
            <div class="label">待离职</div>
          </div>
          <div class="stat-card">
            <div class="number">89%</div>
            <div class="label">人员保有率</div>
          </div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-section">
          <div class="chart-card">
            <div class="chart-title">人员分布</div>
            <div class="donut-chart"></div>
            <div class="chart-legend">
              <div class="legend-item">
                <div class="legend-color" style="background: #40a9ff;"></div>
                <span>在职 (75%)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: #ff4d4f;"></div>
                <span>离职 (25%)</span>
              </div>
            </div>
          </div>
          <div class="chart-card">
            <div class="chart-title">部门分布</div>
            <div class="department-tree">
              <div class="tree-item active">技术部 (450人)</div>
              <div class="tree-item">市场部 (230人)</div>
              <div class="tree-item">销售部 (180人)</div>
              <div class="tree-item">人事部 (45人)</div>
              <div class="tree-item">财务部 (35人)</div>
            </div>
          </div>
        </div>

        <!-- 快捷操作 -->
        <div class="quick-actions">
          <button class="action-button">
            <span>批量导入</span>
          </button>
          <button class="action-button">
            <span>高拍仪录入</span>
          </button>
          <button class="action-button secondary">
            <span>生成花名册</span>
          </button>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
          <div class="filter-row">
            <div class="filter-item">
              <div class="filter-label">姓名/工号</div>
              <input type="text" class="filter-input" placeholder="请输入">
            </div>
            <div class="filter-item">
              <div class="filter-label">入职时间</div>
              <input type="date" class="filter-input">
            </div>
            <div class="filter-item">
              <div class="filter-label">职级</div>
              <select class="filter-input">
                <option>全部</option>
                <option>P1</option>
                <option>P2</option>
                <option>P3</option>
                <option>P4</option>
                <option>P5+</option>
              </select>
            </div>
          </div>
          <div class="filter-row">
            <div class="filter-item">
              <div class="filter-label">部门</div>
              <select class="filter-input">
                <option>全部部门</option>
                <option>技术部</option>
                <option>市场部</option>
                <option>销售部</option>
                <option>人事部</option>
                <option>财务部</option>
              </select>
            </div>
            <div class="filter-item">
              <div class="filter-label">状态</div>
              <select class="filter-input">
                <option>全部状态</option>
                <option>在职</option>
                <option>试用期</option>
                <option>待离职</option>
                <option>已离职</option>
              </select>
            </div>
            <div class="filter-item" style="display: flex; align-items: flex-end;">
              <button class="action-button" style="flex: 1;">搜索</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html> 